<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - 管理数据</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.36cc852e04b38050bd1b.css"><style>@media (-ms-high-contrast:active){.mat-toolbar{outline:solid 1px}}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media (max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media (hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}@media (-ms-high-contrast:active){.mat-button-focus-overlay{background-color:#fff}}@media (-ms-high-contrast:black-on-white){.mat-button-focus-overlay{background-color:#000}}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}@media (-ms-high-contrast:active){.mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button{outline:solid 1px}}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-opened{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (-ms-high-contrast:active){.mat-drawer-backdrop{opacity:.5}}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (-ms-high-contrast:active){.mat-drawer,[dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}}@media (-ms-high-contrast:active){.mat-drawer.mat-drawer-end,[dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c5]{color:#ff0}</style><script charset="utf-8" src="toc-toc-module-ngfactory-es2015.86512cf538ec58e219d6.js"></script><script charset="utf-8" src="default~code-code-example-module-ngfactory~code-code-tabs-module-ngfactory-es2015.b0b838b6f5221a8f35a9.js"></script><script charset="utf-8" src="code-code-example-module-ngfactory-es2015.4ec2dedb4f28a79be2f2.js"></script><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}@media (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-background{display:none}}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}@media (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}@media (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:'';display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.70173,.49582);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.30244,.38135,.55,.95635);transform:translateX(83.67142%)}100%{transform:translateX(200.61106%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.33473,.12482,.78584,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.66148)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.51506,.40969);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.28406,.8,.73371);transform:translateX(37.65191%)}48.35%{animation-timing-function:cubic-bezier(.4,.62704,.6,.90203);transform:translateX(84.38617%)}100%{transform:translateX(160.27778%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.51506,.40969);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.28406,.8,.73371);transform:scaleX(.4571)}44.15%{animation-timing-function:cubic-bezier(.4,.62704,.6,.90203);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="14-es2015.d0d4aa09bbfb33b245d2.js"></script></head><body><aio-shell ng-version="8.0.0-rc.2" class="mode-stable sidenav-open page-getting-started-data folder-getting-started view-SideNav aio-notification-hide"><div id="top-of-page"></div><mat-toolbar class="app-toolbar no-print mat-toolbar mat-primary mat-toolbar-multiple-rows" color="primary"><mat-toolbar-row class="notification-container mat-toolbar-row"><aio-notification expirationdate="2019-03-01" notificationid="survey-february-2019" class="ng-tns-c2-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content"><a href="http://bit.ly/angular-survey-2019" target="_blank"><mat-icon aria-label="Announcement" class="icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="insert_comment" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button class="close-button mat-icon-button" aria-label="Close" mat-icon-button=""><span class="mat-button-wrapper"><mat-icon aria-label="Dismiss notification" class="mat-icon notranslate ng-tns-c2-0 mat-icon-no-color" role="img" svgicon="close" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button class="hamburger mat-button" mat-button="" title="Docs menu"><span class="mat-button-wrapper"><mat-icon class="mat-icon notranslate mat-icon-no-color" role="img" svgicon="menu" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button><a class="nav-link home" href="/"><img alt="Home" height="40" src="assets/images/logos/angular/logo-nav@2x.png" title="Home" width="150" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c5="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c5="" role="navigation"><li _ngcontent-ng-docs-c5="" class="ng-star-inserted"><a _ngcontent-ng-docs-c5="" class="nav-link" href="features" title="特性"><span _ngcontent-ng-docs-c5="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c5="" class="ng-star-inserted"><a _ngcontent-ng-docs-c5="" class="nav-link" href="docs" title="文档"><span _ngcontent-ng-docs-c5="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c5="" class="ng-star-inserted"><a _ngcontent-ng-docs-c5="" class="nav-link" href="resources" title="资源"><span _ngcontent-ng-docs-c5="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c5="" class="ng-star-inserted"><a _ngcontent-ng-docs-c5="" class="nav-link" href="events" title="会议"><span _ngcontent-ng-docs-c5="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c5="" class="ng-star-inserted"><a _ngcontent-ng-docs-c5="" class="nav-link" href="https://blog.angular.io/" title="博客"><span _ngcontent-ng-docs-c5="" class="nav-link-inner">博客</span></a></li><li _ngcontent-ng-docs-c5="" class="ng-star-inserted"><a _ngcontent-ng-docs-c5="" class="nav-link" href="translations/cn/home" title="关于中文版"><span _ngcontent-ng-docs-c5="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input aria-label="search" placeholder="搜索" type="search"></aio-search-box><div class="toolbar-external-icons-container"><a aria-label="Angular on twitter" href="https://twitter.com/angular" title="Twitter"><mat-icon class="mat-icon notranslate mat-icon-no-color" role="img" svgicon="logos:twitter" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a aria-label="Angular on github" href="https://github.com/angular/angular" title="GitHub"><mat-icon class="mat-icon notranslate mat-icon-no-color" role="img" svgicon="logos:github" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container class="sidenav-container mat-drawer-container mat-sidenav-container mat-drawer-transition has-floating-toc" role="main"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav class="sidenav mat-drawer mat-sidenav ng-tns-c7-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted" tabindex="-1" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container"><aio-nav-menu><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" type="button" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="true">快速上手<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="getting-started" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self">你的第一个应用</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="getting-started/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self">路由</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 expanded selected ng-star-inserted" style="position:relative" href="getting-started/data" title="介绍服务以及如何访问外部数据" target="_self">管理数据</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="getting-started/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self">表单</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="getting-started/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self">部署</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/quickstart" title="使用 Angular CLI 搭建本地开发环境简介" target="_self">快速搭建环境</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="此《英雄指南》教程会带你用 TypeScript 一步步创建一个 Angular 应用。" aria-pressed="false">教程：英雄指南<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self">应用的“外壳”</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self">1. 英雄编辑器</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self">2. 显示英雄列表</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的页面重构成多个组件。" target="_self">3. 主从组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self">4. 服务</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self">5. 路由</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self">6. HTTP</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="学习 Angular 的核心知识" aria-pressed="false">核心知识<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular 应用的基本构造块。" aria-pressed="false">架构<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用的基本构造块" target="_self">架构概览</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于模块。" target="_self">模块（NgModule）简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self">组件简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self">服务与 DI 简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="学完基础知识之后……" target="_self">后续步骤</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="使用数据绑定构建动态视图" aria-pressed="false">组件与模板<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self">显示数据</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self">模板语法</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self">用户输入</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self">生命周期钩子</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self">组件交互</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self">组件样式</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素。" target="_self">Angular 自定义元素</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self">动态组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self">属性型指令</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self">结构型指令</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self">管道</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular 的表单" aria-pressed="false">表单<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self">响应式表单</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self">模板驱动表单</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self">表单验证</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self">动态表单</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Observable 与 RxJS" aria-pressed="false">Observable 与 RxJS<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self">可观察对象(Observable)</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self">RxJS 库</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self">Angular 中的可观察对象</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self">用法实战</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self">与其它技术的比较</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="在应用的根模块（AppModule）中告诉 Angular 如何构造并引导引用。" target="_self">引导启动</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular 中的模块" aria-pressed="false">NgModule<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self">NgModule 简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self">JS 模块 vs NgModule</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self">常用模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self">特性模块的分类</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self">入口组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self">特性模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供商与 NgModule" target="_self">服务提供商</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self">单例服务</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self">惰性加载的特性模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self">共享 NgModule</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self">NgModule API</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self">NgModule 常见问题</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="依赖注入：创建并注入各种服务。" aria-pressed="false">依赖注入<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self">Angular 依赖注入</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self">多级注入器</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供商类型的更多知识。" target="_self">DI 提供商</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self">DI 实战</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self">浏览组件树</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self">HttpClient</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self">路由与导航</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular 动画系统指南" aria-pressed="false">动画<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self">转场与触发器</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self">复杂序列</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self">可复用动画</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self">路由转场动画</a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false">其它技术<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self">安全</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self">国际化 (i18n)</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false">Service Worker 与 PWA<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self">快速起步</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self">应用外壳</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self">与 Service Worker 通讯</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self">生产环境下的 Service Worker</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self">Service Worker 配置</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self">服务端渲染</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false">从 AngularJS 升级<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self">升级步骤</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self">更关注性能的升级方式</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self">AngularJS 与 Angular 的概念对照</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="使用共享库扩展 Angular" aria-pressed="false">开发 Angular 库<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self">库概览</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self">使用已发布的库</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self">创建库</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="理解原理图" aria-pressed="false">原理图（Schematic）<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self">原理图概览</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self">制作原理图</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self">库的原理图</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="在 Angular CLI 中可选的启用 Ivy。" target="_self">Angular Ivy（常春藤）</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self">Web Worker</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="构建、测试、部署环境、工具以及配置信息。" aria-pressed="false">环境搭建与部署<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self">项目文件结构</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self">工作区配置</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self">npm 包</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self">TypeScript 配置</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="了解为何以及如何使用预先（AOT）编译器。" target="_self">预先（AOT）编译</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self">构建与运行</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self">使用 Bazel 进行构建</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self">测试</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self">发布</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self">浏览器支持</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="整合开发环境和工具。" aria-pressed="false">开发工具集成<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self">语言服务</a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false">发布信息<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self">保持最新</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践" target="_self">发布实践</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self">弃用清单</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="Angular 语法、编码、术语汇总。" aria-pressed="false">快捷手册<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self">速查表</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self">风格指南</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self">词汇表</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="Angular CLI 命令参考手册。" aria-pressed="false">CLI 命令<mat-icon class="rotating-icon mat-icon notranslate mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self">概览</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self">使用情况分析</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self">ng add</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self">ng analytics</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self">ng build</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self">ng config</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self">ng doc</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self">ng e2e</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self">ng generate</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self">ng help</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self">ng lint</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self">ng new</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self">ng run</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self">ng serve</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self">ng test</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self">ng update</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self">ng version</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self">ng xi18n</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self">API 参考手册</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng-china.org" title="2018 ngChina 开发者大会" target="_blank">2018 ngChina @ 杭州<mat-icon class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank">互助问答<mat-icon class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank">官方 Material 组件库<mat-icon class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank">ng-zorro 组件库<mat-icon class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank">ng-zorro mobile 组件库<mat-icon class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted" style=""><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter-io.cn/" title="Flutter 中文文档站" target="_blank">友站：Flutter 中文<mat-icon class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version"><aio-select><div class="form-select-menu"><button class="form-select-button"><strong></strong>stable (v8.0.0-rc.0)</button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:260px"><main class="sidenav-content" role="main" id="getting-started-data"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/getting-started/data.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="managing-data" translation-result="on">管理数据<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#managing-data"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="8.0.0-rc.2"><div class="toc-inner no-print collapsed ng-star-inserted"><button aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" title="Expand/collapse contents" type="button" aria-pressed="false">目录<mat-icon class="rotating-icon mat-icon notranslate collapsed mat-icon-no-color" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li title="服务link" class="h2 ng-star-inserted"><a href="getting-started/data#services">服务</a></li><li title="创建购物车服务link" class="h2 ng-star-inserted"><a href="getting-started/data#create-the-shopping-cart-service">创建购物车服务</a></li><li title="定义购物车服务link" class="h3 ng-star-inserted"><a href="getting-started/data#define-a-cart-service">定义购物车服务</a></li><li title="使用购物车服务link" class="h3 secondary ng-star-inserted"><a href="getting-started/data#use-the-cart-service">使用购物车服务</a></li><li title="创建购物车页面link" class="h2 secondary ng-star-inserted"><a href="getting-started/data#create-the-cart-page">创建购物车页面</a></li><li title="设置该组件link" class="h3 secondary ng-star-inserted"><a href="getting-started/data#set-up-the-component">设置该组件</a></li><li title="显示购物车商品link" class="h3 secondary ng-star-inserted"><a href="getting-started/data#display-the-cart-items">显示购物车商品</a></li><li title="检索运费价格link" class="h2 secondary ng-star-inserted"><a href="getting-started/data#retrieve-shipping-prices">检索运费价格</a></li><li title="预定义的配送数据link" class="h3 secondary ng-star-inserted"><a href="getting-started/data#predefined-shipping-data">预定义的配送数据</a></li><li title="为应用启用 HttpClientlink" class="h3 secondary ng-star-inserted"><a href="getting-started/data#enable-httpclient-for-app">为应用启用 HttpClient</a></li><li title="为购物车服务启用 HttpClientlink" class="h3 secondary ng-star-inserted"><a href="getting-started/data#enable-httpclient-for-cart-service">为购物车服务启用 HttpClient</a></li><li title="定义 get() 方法link" class="h3 secondary ng-star-inserted"><a href="getting-started/data#define-the-get-method">定义 get() 方法</a></li><li title="定义配送页面link" class="h2 secondary ng-star-inserted"><a href="getting-started/data#define-the-shipping-page">定义配送页面</a></li><li title="下一步link" class="h2 secondary ng-star-inserted"><a href="getting-started/data#next-steps">下一步</a></li></ul><button aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" title="Expand/collapse contents" type="button" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="managing-data">Managing Data<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#managing-data"><i class="material-icons">link</i></a></h1><p translation-result="on">在<a href="getting-started/routing" title="入门：路由">路由</a>的末尾，本应用实现了一个包含两个视图的商品名录：商品列表和商品详情。用户点击清单中的某个商品名称，就会在新视图中看到具有显著 URL（路由）的详情页。</p><p translation-origin="off">At the end of <a href="getting-started/routing" title="Getting Started: Routing">Routing</a>, the online store application has a product catalog with two views: a product list and product details. Users can click on a product name from the list to see details in a new view, with a distinct URL (route).</p><p translation-result="on">在本节中，你将创建购物车。你将：</p><p translation-origin="off">In this section, you'll create the shopping cart. You'll:</p><ul><li><p translation-result="on">修改商品详情页，让它包含一个 “Buy” 按钮，它会把当前商品添加到由 "购物车服务" 管理的商品列表中。</p><p translation-origin="off">Update the product details page to include a "Buy" button, which adds the current product to a list of products managed by a cart service.</p></li><li><p translation-result="on">添加一个购物车组件，它会显示你添加到购物车中的商品。</p><p translation-origin="off">Add a cart component, which displays the items you added to your cart.</p></li><li><p translation-result="on">添加一个配送组件，它会使用 Angular 的 HttpClient 从 <code>.json</code> 文件中检索配送数据来取得购物车中这些商品的运费。</p><p translation-origin="off">Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's HttpClient to retrieve shipping data from a <code>.json</code> file.</p></li></ul><a id="services"></a><h2 id="services" translation-result="on">服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#services"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="services">Services<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#services"><i class="material-icons">link</i></a></h2><p translation-result="on">服务是 Angular 应用的重要组成部分。在 Angular 中，服务是一个类的实例，它可以借助 Angular 的<a href="guide/glossary#dependency-injection-di" title="依赖注入定义">依赖注入系统</a>来让应用中的任何一个部件都能使用它。</p><p translation-origin="off">Services are an integral part of Angular applications. In Angular, a service is an instance of a class that can be made available to any part of your application using Angular's <a href="guide/glossary#dependency-injection-di" title="dependency injection definition">dependency injection system</a>.</p><p translation-result="on">服务可以让你在应用的各个部件之间共享数据。对于在线商店，购物车服务就是存放购物车的数据和方法的地方。</p><p translation-origin="off">Services are the place where you share data between parts of your application. For the online store, the cart service is where you store your cart data and methods.</p><a id="create-cart-service"></a><h2 id="create-the-shopping-cart-service" translation-result="on">创建购物车服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#create-the-shopping-cart-service"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="create-the-shopping-cart-service">Create the shopping cart service<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#create-the-shopping-cart-service"><i class="material-icons">link</i></a></h2><p translation-result="on">到目前为止，用户可以查看商品信息、模拟共享，并接收商品变化的通知。但是，无法购买商品。</p><p translation-origin="off">Up to this point, users can view product information, and simulate sharing and being notified about product changes. They cannot, however, buy products.</p><p translation-result="on">在本节中，你将在商品详情页中添加“Buy”按钮。你还可以设置一个购物车服务来存储购物车中商品的相关信息。</p><p translation-origin="off">In this section, you'll add a "Buy" button the product details page. You'll also set up a cart service to store information about products in the cart.</p><div class="alert is-helpful"><p translation-result="on">稍后，在本教程的<a href="getting-started/forms" title="入门：表单">表单</a>部分，也会从用户的结账页面中访问这个 购物车服务。</p><p translation-origin="off">Later, in the <a href="getting-started/forms" title="Getting Started: Forms">Forms</a> part of this tutorial, this cart service also will be accessed from the page where the user checks out.</p></div><a id="generate-cart-service"></a><h3 id="define-a-cart-service" translation-result="on">定义购物车服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#define-a-cart-service"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="define-a-cart-service">Define a cart service<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#define-a-cart-service"><i class="material-icons">link</i></a></h3><ol><li><p translation-result="on">生成购物车服务。</p><p translation-origin="off">Generate a cart service.</p></li></ol><ol><li><p translation-result="on">右键单击 <code>app</code> 文件夹，选择 <code>Angular Generator</code>，然后选择 <code>**Service**</code>。把新的服务命名为 <code>cart</code>。</p><p translation-origin="off">Right click on the <code>app</code> folder, choose <code>Angular Generator</code>, and choose <code>**Service**</code>. Name the new service <code>cart</code>.</p></li></ol><p><code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.1.ts" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/Injectable" class="code-anchor">Injectable</a> } from '@angular/core'; @<a href="api/core/Injectable" class="code-anchor">Injectable</a>({ <a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root' }) export class CartService { constructor() {} }</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Injectable" class="code-anchor"><span class="typ">Injectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">({</span><span class="pln">
  </span><a href="api/core/Injectable#providedIn" class="code-anchor"><span class="pln">providedIn</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'root'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">

</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">如果生成的 <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> 装饰器中没有包含 <code>{ <a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root' }</code> 语句，那就插入它，如上图所示。</p><p translation-origin="off">If the generated <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> decorator does not include the <code>{ <a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root' }</code> statement, then insert it as shown above.</p></li></ol><ol><li><p translation-result="on">在 <code>CartService</code> 类中，定义一个 <code>items</code> 属性来把当前商品的列表（数组）存储在购物车中。</p><p translation-origin="off">In the <code>CartService</code> class, define an <code>items</code> property to store the list (array) of the current products in the cart.</p></li></ol><p><code-example path="getting-started/src/app/cart.service.ts" region="props" ng-version="8.0.0-rc.2"><div style="display:none">export class CartService { items = []; }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">定义把商品添加到购物车、返回购物车商品以及清除购物车商品的方法：</p><p translation-origin="off">Define methods to add items to the cart, return cart items, and clear the cart items:</p></li></ol><p><code-example path="getting-started/src/app/cart.service.ts" region="methods" linenums="false" ng-version="8.0.0-rc.2"><div style="display:none">export class CartService { items = []; addToCart(product) { this.items.push(product); } getItems() { return this.items; } clearCart() { this.items = []; return this.items; } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">

  addToCart</span><span class="pun">(</span><span class="pln">product</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">product</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  getItems</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  clearCart</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><a id="product-details-use-cart-service"></a><h3 id="use-the-cart-service" translation-result="on">使用购物车服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#use-the-cart-service"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="use-the-cart-service">Use the cart service<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#use-the-cart-service"><i class="material-icons">link</i></a></h3><p translation-result="on">在本节中，你将修改商品详情组件以使用这个购物车服务。你可以在商品详情视图中添加一个“Buy”按钮。单击“Buy”按钮后，你将借助购物车服务来把当前商品添加到购物车中。</p><p translation-origin="off">In this section, you'll update the product details component to use the cart service. You'll add a "Buy" button to the product details view. When the "Buy" button is clicked, you'll use the cart service to add the current product to the cart.</p><ol><li><p translation-result="on">打开 <code>product-details.component.ts</code>。</p><p translation-origin="off">Open <code>product-details.component.ts</code>.</p></li></ol><ol><li><p translation-result="on">设置该组件，使其能使用这个购物车服务。</p><p translation-origin="off">Set up the component to be able to use the cart service.</p></li></ol><ol><li><p translation-result="on">导入购物车服务。</p><p translation-origin="off">Import the cart service.</p></li></ol><code-example header="src/app/product-details/product-details.component.ts" path="getting-started/src/app/product-details/product-details.component.ts" region="cart-service" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/OnInit" class="code-anchor">OnInit</a> } from '@angular/core'; import { <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a> } from '@angular/router'; import { products } from '../products'; import { CartService } from '../cart.service';</div><header class="ng-star-inserted">src/app/product-details/product-details.component.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/product-details/product-details.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> products </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../products'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../cart.service'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">注入购物车服务。</p><p translation-origin="off">Inject the cart service.</p></li></ol><code-example path="getting-started/src/app/product-details/product-details.component.ts" region="inject-cart-service" ng-version="8.0.0-rc.2"><div style="display:none">export class ProductDetailsComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { constructor( private route: <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a>, private cartService: CartService ) { } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> route</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pun">,</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">定义 <code>addToCart()</code> 方法，该方法会当前商品添加到购物车中。</p><p translation-origin="off">Define the <code>addToCart()</code> method, which adds the current product to the cart.</p></li></ol><p translation-result="on"> <code>addToCart()</code> 方法：</p><p translation-origin="off">The <code>addToCart()</code> method:</p><ul><li><p translation-result="on">收到当前的 <code>product</code></p><p translation-origin="off">Receives the current <code>product</code></p></li><li><p translation-result="on">使用购物车服务的 <code>#addToCart()</code> 方法把该商品添加到购物车中</p><p translation-origin="off">Uses the cart service's <code>#addToCart()</code> method to add the product the cart</p></li><li><p translation-result="on">显示一条 "商品已添加到购物车" 的消息</p><p translation-origin="off">Displays a message that the product has been added to the cart</p></li></ul><p><code-example path="getting-started/src/app/product-details/product-details.component.ts" region="add-to-cart" ng-version="8.0.0-rc.2"><div style="display:none">export class ProductDetailsComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { addToCart(product) { window.alert('Your product has been added to the cart!'); this.cartService.addToCart(product); } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  addToCart</span><span class="pun">(</span><span class="pln">product</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    window</span><span class="pun">.</span><span class="pln">alert</span><span class="pun">(</span><span class="str">'Your product has been added to the cart!'</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">cartService</span><span class="pun">.</span><span class="pln">addToCart</span><span class="pun">(</span><span class="pln">product</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">修改商品详情模板，让它具有一个“Buy”按钮，用于把当前商品添加到购物车中。</p><p translation-origin="off">Update the product details template to have a "Buy" button that adds the current product to the cart.</p></li></ol><ol><li><p translation-result="on">打开 <code>product-details.component.html</code>。</p><p translation-origin="off">Open <code>product-details.component.html</code>.</p></li></ol><ol><li><p translation-result="on">添加一个标签为“Buy”的按钮，并把其 <code>click()</code> 事件绑定到 <code>addToCart()</code> 方法：</p><p translation-origin="off">Add a button with the label "Buy", and bind the <code>click()</code> event to the <code>addToCart()</code> method:</p></li></ol><code-example header="src/app/product-details/product-details.component.html" path="getting-started/src/app/product-details/product-details.component.html" ng-version="8.0.0-rc.2"><div style="display:none">&lt;h2&gt;Product Details&lt;/h2&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="product"&gt; &lt;h3&gt;{{ product.name }}&lt;/h3&gt; &lt;h4&gt;{{ product.price | currency }}&lt;/h4&gt; &lt;p&gt;{{ product.description }}&lt;/p&gt; &lt;button (click)="addToCart(product)"&gt;Buy&lt;/button&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/product-details/product-details.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/product-details/product-details.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h2&gt;</span><span class="pln">Product Details</span><span class="tag">&lt;/h2&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"product"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;h3&gt;</span><span class="pln">{{ product.name }}</span><span class="tag">&lt;/h3&gt;</span><span class="pln">
  </span><span class="tag">&lt;h4&gt;</span><span class="pln">{{ product.price | currency }}</span><span class="tag">&lt;/h4&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">{{ product.description }}</span><span class="tag">&lt;/p&gt;</span><span class="pln">

  </span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"addToCart(product)"</span><span class="tag">&gt;</span><span class="pln">Buy</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">要查看新的“Buy”按钮，请刷新应用并单击商品名称以显示其详细信息。</p><p translation-origin="off">To see the new "Buy" button, refresh the application and click on a product's name to display its details.</p></li></ol><figure><img src="generated/images/guide/getting-started/product-details-buy.png" alt="Display details for selected product with a Buy button" width="259" height="233"></figure><ol><li><p translation-result="on">点击“Buy”按钮。该商品已添加到了购物车中存储的商品列表中，并显示一条消息。</p><p translation-origin="off">Click the "Buy" button. The product is added to the stored list of items in the cart, and a message is displayed.</p></li></ol><figure><img src="generated/images/guide/getting-started/buy-alert.png" alt="Display details for selected product with a Buy button" width="329" height="106"></figure><h2 id="create-the-cart-page" translation-result="on">创建购物车页面<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#create-the-cart-page"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="create-the-cart-page">Create the cart page<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#create-the-cart-page"><i class="material-icons">link</i></a></h2><p translation-result="on">此时，用户可以通过点击“Buy”来把商品放入购物车，但他们还看不到购物车。</p><p translation-origin="off">At this point, users can put items in the cart by clicking "Buy", but they can't yet see their cart.</p><p translation-result="on">我们将分两步来创建购物车页面：</p><p translation-origin="off">We'll create the cart page in two steps:</p><ol><li><p translation-result="on">创建一个购物车组件并设置到这个新组件的路由。此时，购物车页面只会显示默认文本。</p><p translation-origin="off">Create a cart component and set up routing to the new component. At this point, the cart page will only have default text.</p></li><li><p translation-result="on">显示购物车商品</p><p translation-origin="off">Display the cart items.</p></li></ol><h3 id="set-up-the-component" translation-result="on">设置该组件<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#set-up-the-component"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="set-up-the-component">Set up the component<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#set-up-the-component"><i class="material-icons">link</i></a></h3><p translation-result="on">要创建购物车页面，首先要执行与创建商品详情组件相同的步骤，并为这个新组件设置路由。</p><p translation-origin="off">To create the cart page, you begin by following the same steps you did to create the product details component and to set up routing for the new component.</p><ol><li><p translation-result="on">生成一个名叫 <code>cart</code> 的购物车组件。</p><p translation-origin="off">Generate a cart component, named <code>cart</code>.</p></li></ol><p translation-result="on">提示：在文件列表框中，右键单击 <code>app</code> 文件夹，选择 <code>Angular Generator</code> 和 <code><a href="api/core/Component" class="code-anchor">Component</a></code>。</p><p translation-origin="off">Reminder: In the file list, right-click the <code>app</code> folder, choose <code>Angular Generator</code> and <code><a href="api/core/Component" class="code-anchor">Component</a></code>.</p><p><code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.1.ts" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/OnInit" class="code-anchor">OnInit</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-cart', templateUrl: './cart.component.html', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: ['./cart.component.css'] }) export class CartComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { constructor() { } ngOnInit() { } }</div><header class="ng-star-inserted">src/app/cart/cart.component.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/cart/cart.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span></li><li class="L3"><span class="pln">  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-cart'</span><span class="pun">,</span></li><li class="L4"><span class="pln">  templateUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'./cart.component.html'</span><span class="pun">,</span></li><li class="L5"><span class="pln">  </span><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'./cart.component.css'</span><span class="pun">]</span></li><li class="L6"><span class="pun">})</span></li><li class="L7"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span></li><li class="L8"><span class="pln">&nbsp;</span></li><li class="L9"><span class="pln">  </span><span class="kwd">constructor</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></li><li class="L0"><span class="pln">&nbsp;</span></li><li class="L1"><span class="pln">  ngOnInit</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></li><li class="L2"><span class="pln">  </span><span class="pun">}</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="pun">}</span></li></ol></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">为购物车组件添加路由（URL 模式）。</p><p translation-origin="off">Add routing (a URL pattern) for the cart component.</p></li></ol><p translation-result="on">提示：打开 <code>app.module.ts</code>，为组件 <code>CartComponent</code> 添加一个路由，其路由为 <code>cart</code> ：</p><p translation-origin="off">Reminder: Open <code>app.module.ts</code> and add a route for the component <code>CartComponent</code>, with a <code>path</code> of <code>cart</code>:</p><code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="cart-route" ng-version="8.0.0-rc.2"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/forms/ReactiveFormsModule" class="code-anchor">ReactiveFormsModule</a>, RouterModule.forRoot([ { path: '', component: ProductListComponent }, { path: 'products/:productId', component: ProductDetailsComponent }, { path: 'cart', component: CartComponent }, ]) ],</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/ReactiveFormsModule" class="code-anchor"><span class="typ">ReactiveFormsModule</span></a><span class="pun">,</span><span class="pln">
    </span><span class="typ">RouterModule</span><span class="pun">.</span><span class="pln">forRoot</span><span class="pun">([</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductListComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'products/:productId'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'cart'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
    </span><span class="pun">])</span><span class="pln">
  </span><span class="pun">],</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">要查看新的购物车组件，请点击“Checkout”按钮。你会看到默认文本“cart works!”，该 URL 的格式为 <code>https://getting-started.stackblitz.io/cart</code>，其中的 getting-started.stackblitz.io 部分可能与你的 StackBlitz 项目不同。</p><p translation-origin="off">To see the new cart component, click the "Checkout" button. You can see the "cart works!" default text, and the URL has the pattern <code>https://getting-started.stackblitz.io/cart</code>, where <code>getting-started.stackblitz.io</code> may be different for your StackBlitz project.</p></li></ol><p translation-result="on">（注意：我们在顶栏组件中提供的“Checkout”按钮已经配置了指向 <code>/cart</code> 的 <code><a href="api/router/RouterLink" class="code-anchor">routerLink</a></code>。）</p><p translation-origin="off">(Note: The "Checkout" button that we provided in the top-bar component was already configured with a <code><a href="api/router/RouterLink" class="code-anchor">routerLink</a></code> for <code>/cart</code>.)</p><figure><img src="generated/images/guide/getting-started/cart-works.png" alt="Display cart page before customizing" width="259" height="193"></figure><h3 id="display-the-cart-items" translation-result="on">显示购物车商品<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#display-the-cart-items"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="display-the-cart-items">Display the cart items<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#display-the-cart-items"><i class="material-icons">link</i></a></h3><p translation-result="on">服务可用于跨组件共享数据：</p><p translation-origin="off">Services can be used to share data across components:</p><ul><li><p translation-result="on">商品详情组件已经使用了购物车服务（ <code>CartService</code> ）来把商品添加到购物车中。</p><p translation-origin="off">The product details component already uses the cart service (<code>CartService</code>) to add products to the cart.</p></li><li><p translation-result="on">在本节中，你将修改购物车组件以使用购物车服务来显示购物车中的商品。</p><p translation-origin="off">In this section, you'll update the cart component to use the cart service to display the products in the cart.</p></li></ul><ol><li><p translation-result="on">打开 <code>cart.component.ts</code>。</p><p translation-origin="off">Open <code>cart.component.ts</code>.</p></li></ol><ol><li><p translation-result="on">设置该组件是为了让它能够使用这个购物车服务。（这与你在前面设置商品详情组件以使用购物车服务的方式是一样的。）</p><p translation-origin="off">Set up the component to be able to use the cart service. (This is the same way you set up the product details component to use the cart service, above.)</p></li></ol><ol><li><p translation-result="on">从 <code>cart.service.ts</code> 文件中导入 <code>CartService</code>。</p><p translation-origin="off">Import the <code>CartService</code> from the <code>cart.service.ts</code> file.</p></li></ol><code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.2.ts" region="imports" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { CartService } from '../cart.service';</div><header class="ng-star-inserted">src/app/cart/cart.component.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/cart/cart.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../cart.service'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">注入 <code>CartService</code> 来管理购物车信息。</p><p translation-origin="off">Inject the <code>CartService</code> to manage cart information.</p></li></ol><code-example path="getting-started/src/app/cart/cart.component.2.ts" region="inject-cart" ng-version="8.0.0-rc.2"><div style="display:none">export class CartComponent { constructor( private cartService: CartService ) { } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">定义 <code>items</code> 属性，以便把商品存放在购物车中。</p><p translation-origin="off">Define the <code>items</code> property to store the products in the cart.</p></li></ol><code-example path="getting-started/src/app/cart/cart.component.2.ts" region="items" ng-version="8.0.0-rc.2"><div style="display:none">export class CartComponent { items; constructor( private cartService: CartService ) { } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">使用购物车服务的 <code>getItems()</code> 方法设置这些商品。（你<a href="getting-started/data#generate-cart-service">在生成 <code>cart.service.ts</code> 时</a>定义过这个方法。）</p><p translation-origin="off">Set the items using the cart service's <code>getItems()</code> method. (You defined this method <a href="getting-started/data#generate-cart-service">when you generated <code>cart.service.ts</code></a>.)</p></li></ol><p translation-result="on">所生成的 <code>CartComponent</code> 类是这样的：</p><p translation-origin="off">The resulting <code>CartComponent</code> class should look like this:</p><code-example path="getting-started/src/app/cart/cart.component.3.ts" region="props-services" ng-version="8.0.0-rc.2"><div style="display:none">export class CartComponent { items; constructor( private cartService: CartService ) { this.items = this.cartService.getItems(); } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">cartService</span><span class="pun">.</span><span class="pln">getItems</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">修改模板，加上标题（“Cart”），用带有 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 的 <code>&lt;div&gt;</code> 来显示每个购物车商品的名字和价格。</p><p translation-origin="off">Update the template with a header ("Cart"), and use a <code>&lt;div&gt;</code> with an <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> to display each of the cart items with its name and price.</p></li></ol><p translation-result="on">生成的 <code>CartComponent</code> 模板如下：</p><p translation-origin="off">The resulting <code>CartComponent</code> template should look like this:</p><code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.2.html" region="prices" ng-version="8.0.0-rc.2"><div style="display:none">&lt;h3&gt;Cart&lt;/h3&gt; &lt;div class="cart-item" *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"&gt; &lt;span&gt;{{ item.name }} &lt;/span&gt; &lt;span&gt;{{ item.price | currency }}&lt;/span&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/cart/cart.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/cart/cart.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Cart</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cart-item"</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ item.name }} </span><span class="tag">&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ item.price | currency }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">测试你的购物车组件。</p><p translation-origin="off">Test your cart component.</p></li></ol><ol><li><p translation-result="on">点击“My Store”，进入商品列表页面。</p><p translation-origin="off">Click on "My Store" to go to the product list page.</p></li><li><p translation-result="on">单击商品名称以显示其详细信息。</p><p translation-origin="off">Click on a product name to display its details.</p></li><li><p translation-result="on">点击“Buy”，即可将商品添加到购物车。</p><p translation-origin="off">Click "Buy" to add the product to the cart.</p></li><li><p translation-result="on">点击“Checkout”查看购物车。</p><p translation-origin="off">Click "Checkout" to see the cart.</p></li><li><p translation-result="on">要添加其它商品，请点击“My Store”返回商品列表。重复上述步骤。</p><p translation-origin="off">To add another product, click "My Store" to return to the product list. Repeat the steps above.</p></li></ol><figure><img src="generated/images/guide/getting-started/cart-page-full.png" alt="Cart page with products added" width="259" height="238"></figure><div class="alert is-helpful"><p translation-result="on">StackBlitz 提示：只要预览刷新，就会清除购物车。如果你对该应用进行了更改，页面就会刷新，你需要重新购买商品来填充购物车。</p><p translation-origin="off">StackBlitz tip: Any time the preview refreshes, the cart is cleared. If you make changes to the app, the page refreshes, and you'll need to buy products again to populate the cart.</p></div><div class="alert is-helpful"><p translation-result="on">要了解关于<a href="guide/architecture-services" title="架构>服务简介和 DI">服务</a>的更多信息，请参阅<a href="guide/architecture-services" title="架构>服务简介和 DI">“服务和依赖注入简介”</a>。</p><p translation-origin="off">Learn more: See <a href="guide/architecture-services" title="Architecture > Intro to Services and DI">Introduction to Services and Dependency Injection</a> for more information about services.</p></div><h2 id="retrieve-shipping-prices" translation-result="on">检索运费价格<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#retrieve-shipping-prices"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="retrieve-shipping-prices">Retrieve shipping prices<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#retrieve-shipping-prices"><i class="material-icons">link</i></a></h2><p translation-result="on">从服务器返回的数据通常采用流的形式。流是很有用的，因为它们可以很容易地转换返回的数据，也可以修改请求数据的方式。Angular 的 HTTP 客户端（ <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> ）是一种内置的方式，可以从外部 API 中获取数据，并以流的形式提供给你的应用。</p><p translation-origin="off">Data returned from servers often takes the form of a stream. Streams are useful because they make it easy to transform the data that is returned, and to make modifications to the way data is requested. The Angular HTTP client (<code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code>) is a built-in way to fetch data from external APIs and provide them to your application as a stream.</p><p translation-result="on">在本节中，你将使用 HTTP 客户端从外部文件中检索运费。</p><p translation-origin="off">In this section, you'll use the HTTP client to retrieve shipping prices from an external file.</p><h3 id="predefined-shipping-data" translation-result="on">预定义的配送数据<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#predefined-shipping-data"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="predefined-shipping-data">Predefined shipping data<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#predefined-shipping-data"><i class="material-icons">link</i></a></h3><p translation-result="on">为了满足本“入门指南”的需求，我们在 <code>assets/shipping.json</code> 中提供了配送数据。你可以利用这些数据为购物车中的商品添加运费。</p><p translation-origin="off">For the purpose of this Getting Started, we have provided shipping data in <code>assets/shipping.json</code>. You'll use this data to add shipping prices for items in the cart.</p><code-example header="src/assets/shipping.json" path="getting-started/src/assets/shipping.json" ng-version="8.0.0-rc.2"><div style="display:none">[ { "type": "Overnight", "price": 25.99 }, { "type": "2-Day", "price": 9.99 }, { "type": "Postal", "price": 2.99 } ]</div><header class="ng-star-inserted">src/assets/shipping.json</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/assets/shipping.json">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="pun">[</span></li><li class="L1"><span class="pln">  </span><span class="pun">{</span></li><li class="L2"><span class="pln">    </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Overnight"</span><span class="pun">,</span></li><li class="L3"><span class="pln">    </span><span class="str">"price"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">25.99</span></li><li class="L4"><span class="pln">  </span><span class="pun">},</span></li><li class="L5"><span class="pln">  </span><span class="pun">{</span></li><li class="L6"><span class="pln">    </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"2-Day"</span><span class="pun">,</span></li><li class="L7"><span class="pln">    </span><span class="str">"price"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">9.99</span></li><li class="L8"><span class="pln">  </span><span class="pun">},</span></li><li class="L9"><span class="pln">  </span><span class="pun">{</span></li><li class="L0"><span class="pln">    </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Postal"</span><span class="pun">,</span></li><li class="L1"><span class="pln">    </span><span class="str">"price"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2.99</span></li><li class="L2"><span class="pln">  </span><span class="pun">}</span></li><li class="L3"><span class="pun">]</span></li></ol></code>
    </pre></aio-code></code-example><h3 id="enable-httpclient-for-app" translation-result="on">为应用启用 HttpClient<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#enable-httpclient-for-app"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="enable-httpclient-for-app">Enable HttpClient for app<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#enable-httpclient-for-app"><i class="material-icons">link</i></a></h3><p translation-result="on">在使用 Angular 的 HTTP 客户端之前，你必须先设置你的应用来使用 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>。</p><p translation-origin="off">Before you can use Angular's HTTP client, you must set up your app to use <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>.</p><p translation-result="on">Angular 的 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> 中注册了在整个应用中使用 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 服务的单个实例所需的服务提供商。你可以在服务中注入 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 服务来获取数据并与外部 API 和资源进行交互。</p><p translation-origin="off">Angular's <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> registers the providers needed to use a single instance of the <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> service throughout your app. The <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> service is what you inject into your services to fetch data and interact with external APIs and resources.</p><ol><li><p translation-result="on">打开 <code>app.module.ts</code>。</p><p translation-origin="off">Open <code>app.module.ts</code>.</p></li></ol><p translation-result="on">该文件包含可供整个应用使用的导入对象和功能。</p><p translation-origin="off">This file contains imports and functionality that is available to the entire app.</p><ol><li><p translation-result="on">从 <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> 包中导入 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>。</p><p translation-origin="off">Import <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> from the <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> package.</p></li></ol><code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="http-client-module-import" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { <a href="api/router/RouterModule" class="code-anchor">RouterModule</a> } from '@angular/router'; import { <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>';</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/RouterModule" class="code-anchor"><span class="typ">RouterModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">把 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> 添加到应用模块（<code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code>）的 <code>imports</code> 数组中。</p><p translation-origin="off">Add <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> to the <code>imports</code> array of the app module (<code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code>).</p></li></ol><p translation-result="on">这会在全局注册 Angular 的 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 提供商。</p><p translation-origin="off">This registers Angular's <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> providers globally.</p><code-example path="getting-started/src/app/app.module.ts" region="http-client-module" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { <a href="api/router/RouterModule" class="code-anchor">RouterModule</a> } from '@angular/router'; import { <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>'; import { <a href="api/forms/ReactiveFormsModule" class="code-anchor">ReactiveFormsModule</a> } from '@angular/forms'; import { AppComponent } from './app.component'; import { TopBarComponent } from './top-bar/top-bar.component'; import { ProductListComponent } from './product-list/product-list.component'; import { ProductAlertsComponent } from './product-alerts/product-alerts.component'; import { ProductDetailsComponent } from './product-details/product-details.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, <a href="api/forms/ReactiveFormsModule" class="code-anchor">ReactiveFormsModule</a>, RouterModule.forRoot([ { path: '', component: ProductListComponent }, { path: 'products/:productId', component: ProductDetailsComponent }, { path: 'cart', component: CartComponent }, ]) ], declarations: [ AppComponent, TopBarComponent, ProductListComponent, ProductAlertsComponent, ProductDetailsComponent, CartComponent, ], bootstrap: [ AppComponent ] }) export class AppModule { }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span></li><li class="L1"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span></li><li class="L2"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/RouterModule" class="code-anchor"><span class="typ">RouterModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span></li><li class="L3"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span></li><li class="L4"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/ReactiveFormsModule" class="code-anchor"><span class="typ">ReactiveFormsModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/forms'</span><span class="pun">;</span></li><li class="L5"><span class="pln">&nbsp;</span></li><li class="L6"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.component'</span><span class="pun">;</span></li><li class="L7"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">TopBarComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./top-bar/top-bar.component'</span><span class="pun">;</span></li><li class="L8"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">ProductListComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./product-list/product-list.component'</span><span class="pun">;</span></li><li class="L9"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">ProductAlertsComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./product-alerts/product-alerts.component'</span><span class="pun">;</span></li><li class="L0"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./product-details/product-details.component'</span><span class="pun">;</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span></li><li class="L3"><span class="pln">  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></li><li class="L4"><span class="pln">    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span></li><li class="L5"><span class="pln">    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span></li><li class="L6"><span class="pln">    </span><a href="api/forms/ReactiveFormsModule" class="code-anchor"><span class="typ">ReactiveFormsModule</span></a><span class="pun">,</span></li><li class="L7"><span class="pln">    </span><span class="typ">RouterModule</span><span class="pun">.</span><span class="pln">forRoot</span><span class="pun">([</span></li><li class="L8"><span class="pln">      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductListComponent</span><span class="pln"> </span><span class="pun">},</span></li><li class="L9"><span class="pln">      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'products/:productId'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="pun">},</span></li><li class="L0"><span class="pln">      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'cart'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">},</span></li><li class="L1"><span class="pln">    </span><span class="pun">])</span></li><li class="L2"><span class="pln">  </span><span class="pun">],</span></li><li class="L3"><span class="pln">  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></li><li class="L4"><span class="pln">    </span><span class="typ">AppComponent</span><span class="pun">,</span></li><li class="L5"><span class="pln">    </span><span class="typ">TopBarComponent</span><span class="pun">,</span></li><li class="L6"><span class="pln">    </span><span class="typ">ProductListComponent</span><span class="pun">,</span></li><li class="L7"><span class="pln">    </span><span class="typ">ProductAlertsComponent</span><span class="pun">,</span></li><li class="L8"><span class="pln">    </span><span class="typ">ProductDetailsComponent</span><span class="pun">,</span></li><li class="L9"><span class="pln">    </span><span class="typ">CartComponent</span><span class="pun">,</span></li><li class="L0"><span class="pln">  </span><span class="pun">],</span></li><li class="L1"><span class="pln">  bootstrap</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></li><li class="L2"><span class="pln">    </span><span class="typ">AppComponent</span></li><li class="L3"><span class="pln">  </span><span class="pun">]</span></li><li class="L4"><span class="pun">})</span></li><li class="L5"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></li></ol></code>
    </pre></aio-code></code-example><h3 id="enable-httpclient-for-cart-service" translation-result="on">为购物车服务启用 HttpClient<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#enable-httpclient-for-cart-service"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="enable-httpclient-for-cart-service">Enable HttpClient for cart service<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#enable-httpclient-for-cart-service"><i class="material-icons">link</i></a></h3><ol><li><p translation-result="on">打开 <code>cart.service.ts</code>。</p><p translation-origin="off">Open <code>cart.service.ts</code>.</p></li></ol><ol><li><p translation-result="on">从 <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> 包中导入 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code>。</p><p translation-origin="off">Import <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> from the <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> package.</p></li></ol><code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.ts" region="import-http" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/Injectable" class="code-anchor">Injectable</a> } from '@angular/core'; import { <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>';</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Injectable" class="code-anchor"><span class="typ">Injectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">把 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 注入到 <code>CartService</code> 组件类的构造函数中：</p><p translation-origin="off">Inject <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> into the constructor of the <code>CartService</code> component class:</p></li></ol><code-example path="getting-started/src/app/cart.service.ts" region="inject-http" ng-version="8.0.0-rc.2"><div style="display:none">export class CartService { items = []; constructor( private <a href="api/common/http" class="code-anchor">http</a>: <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a> ) {} }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> </span><a href="api/common/http" class="code-anchor"><span class="pln">http</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><h3 id="define-the-get-method" translation-result="on">定义 get() 方法<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#define-the-get-method"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="define-the-get-method">Define the get() method<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#define-the-get-method"><i class="material-icons">link</i></a></h3><p translation-result="on">如你所见，多个组件可以使用同一个服务。在这个教程的后半部分，商品配送组件将使用该购物车服务从 <code>shipping.json</code> 文件中借助 HTTP 检索配送数据。在这里你要定义很快就要用到的 <code>get()</code> 方法。</p><p translation-origin="off">As you've seen, multiple components can leverage the same service. Later in this tutorial, the shipping component will use the cart service to retrieve shipping data via HTTP from the <code>shipping.json</code> file. Here you'll define the <code>get()</code> method that will be used.</p><ol><li><p translation-result="on">继续在 <code>cart.service.ts</code> 中工作。</p><p translation-origin="off">Continue working in <code>cart.service.ts</code>.</p></li></ol><ol><li><p translation-result="on">在 <code>clearCart()</code> 方法下面，定义一个新的 <code>getShippingPrices()</code> 方法，该方法使用 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a>#get()</code> 方法检索配送数据（类型和价格）。</p><p translation-origin="off">Below the <code>clearCart()</code> method, define a new <code>getShippingPrices()</code> method that uses the <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a>#get()</code> method to retrieve the shipping data (types and prices).</p></li></ol><p><code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.ts" region="get-shipping" ng-version="8.0.0-rc.2"><div style="display:none">export class CartService { items = []; constructor( private <a href="api/common/http" class="code-anchor">http</a>: <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a> ) {} addToCart(product) { this.items.push(product); } getItems() { return this.items; } clearCart() { this.items = []; return this.items; } getShippingPrices() { return this.http.get('/assets/shipping.json'); } }</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span></li><li class="L1"><span class="pln">  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span></li><li class="L2"><span class="pln">&nbsp;</span></li><li class="L3"><span class="pln">  </span><span class="kwd">constructor</span><span class="pun">(</span></li><li class="L4"><span class="pln">    </span><span class="kwd">private</span><span class="pln"> </span><a href="api/common/http" class="code-anchor"><span class="pln">http</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a></li><li class="L5"><span class="pln">  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span></li><li class="L6"><span class="pln">&nbsp;</span></li><li class="L7"><span class="pln">  addToCart</span><span class="pun">(</span><span class="pln">product</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></li><li class="L8"><span class="pln">    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">product</span><span class="pun">);</span></li><li class="L9"><span class="pln">  </span><span class="pun">}</span></li><li class="L0"><span class="pln">&nbsp;</span></li><li class="L1"><span class="pln">  getItems</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></li><li class="L2"><span class="pln">    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">;</span></li><li class="L3"><span class="pln">  </span><span class="pun">}</span></li><li class="L4"><span class="pln">&nbsp;</span></li><li class="L5"><span class="pln">  clearCart</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></li><li class="L6"><span class="pln">    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span></li><li class="L7"><span class="pln">    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">;</span></li><li class="L8"><span class="pln">  </span><span class="pun">}</span></li><li class="L9"><span class="pln">&nbsp;</span></li><li class="L0"><span class="pln">  getShippingPrices</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></li><li class="L1"><span class="pln">    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">http</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'/assets/shipping.json'</span><span class="pun">);</span></li><li class="L2"><span class="pln">  </span><span class="pun">}</span></li><li class="L3"><span class="pun">}</span></li></ol></code>
    </pre></aio-code></code-example></p><div class="alert is-helpful"><p translation-result="on">要了解关于 Angular HttpClient 的更多信息，请参阅<a href="guide/http" title="HttpClient 指南">HttpClient 指南</a>。</p><p translation-origin="off">Learn more: See the <a href="guide/http" title="HttpClient guide">HttpClient guide</a> for more information about Angular's HttpClient.</p></div><h2 id="define-the-shipping-page" translation-result="on">定义配送页面<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#define-the-shipping-page"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="define-the-shipping-page">Define the shipping page<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#define-the-shipping-page"><i class="material-icons">link</i></a></h2><p translation-result="on">现在你的应用已经可以检索配送数据了，你还要创建一个配送组件和相关的模板。</p><p translation-origin="off">Now that your app can retrieve shipping data, you'll create a shipping component and associated template.</p><ol><li><p translation-result="on">生成一个名为 <code>shipping</code> 的新组件。</p><p translation-origin="off">Generate a new component named <code>shipping</code>.</p></li></ol><p translation-result="on">提示：在文件列表框中，右键单击 <code>app</code> 文件夹，选择 <code>Angular Generator</code> 和 <code><a href="api/core/Component" class="code-anchor">Component</a></code>。</p><p translation-origin="off">Reminder: In the file list, right-click the <code>app</code> folder, choose <code>Angular Generator</code> and <code><a href="api/core/Component" class="code-anchor">Component</a></code>.</p><p><code-example header="src/app/shipping/shipping.component.ts" path="getting-started/src/app/shipping/shipping.component.1.ts" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/OnInit" class="code-anchor">OnInit</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-shipping', templateUrl: './shipping.component.html', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: ['./shipping.component.css'] }) export class ShippingComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { constructor() { } ngOnInit() { } }</div><header class="ng-star-inserted">src/app/shipping/shipping.component.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/shipping/shipping.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span></li><li class="L3"><span class="pln">  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-shipping'</span><span class="pun">,</span></li><li class="L4"><span class="pln">  templateUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'./shipping.component.html'</span><span class="pun">,</span></li><li class="L5"><span class="pln">  </span><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'./shipping.component.css'</span><span class="pun">]</span></li><li class="L6"><span class="pun">})</span></li><li class="L7"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ShippingComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span></li><li class="L8"><span class="pln">&nbsp;</span></li><li class="L9"><span class="pln">  </span><span class="kwd">constructor</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></li><li class="L0"><span class="pln">&nbsp;</span></li><li class="L1"><span class="pln">  ngOnInit</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></li><li class="L2"><span class="pln">  </span><span class="pun">}</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="pun">}</span></li></ol></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">在 <code>app.module.ts</code> 中，添加一个配送路由。其 <code>path</code> 为 <code>shipping</code>，其 component 为 <code>ShippingComponent</code>。</p><p translation-origin="off">In <code>app.module.ts</code>, add a route for shipping. Specify a <code>path</code> of <code>shipping</code> and a component of <code>ShippingComponent</code>.</p></li></ol><p><code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="shipping-route" ng-version="8.0.0-rc.2"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, <a href="api/forms/ReactiveFormsModule" class="code-anchor">ReactiveFormsModule</a>, RouterModule.forRoot([ { path: '', component: ProductListComponent }, { path: 'products/:productId', component: ProductDetailsComponent }, { path: 'cart', component: CartComponent }, { path: 'shipping', component: ShippingComponent }, ]) ], declarations: [ AppComponent, TopBarComponent, ProductListComponent, ProductAlertsComponent, ProductDetailsComponent, CartComponent, ShippingComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span></li><li class="L1"><span class="pln">  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></li><li class="L2"><span class="pln">    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span></li><li class="L3"><span class="pln">    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span></li><li class="L4"><span class="pln">    </span><a href="api/forms/ReactiveFormsModule" class="code-anchor"><span class="typ">ReactiveFormsModule</span></a><span class="pun">,</span></li><li class="L5"><span class="pln">    </span><span class="typ">RouterModule</span><span class="pun">.</span><span class="pln">forRoot</span><span class="pun">([</span></li><li class="L6"><span class="pln">      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductListComponent</span><span class="pln"> </span><span class="pun">},</span></li><li class="L7"><span class="pln">      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'products/:productId'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="pun">},</span></li><li class="L8"><span class="pln">      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'cart'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">},</span></li><li class="L9"><span class="pln">      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'shipping'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ShippingComponent</span><span class="pln"> </span><span class="pun">},</span></li><li class="L0"><span class="pln">    </span><span class="pun">])</span></li><li class="L1"><span class="pln">  </span><span class="pun">],</span></li><li class="L2"><span class="pln">  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></li><li class="L3"><span class="pln">    </span><span class="typ">AppComponent</span><span class="pun">,</span></li><li class="L4"><span class="pln">    </span><span class="typ">TopBarComponent</span><span class="pun">,</span></li><li class="L5"><span class="pln">    </span><span class="typ">ProductListComponent</span><span class="pun">,</span></li><li class="L6"><span class="pln">    </span><span class="typ">ProductAlertsComponent</span><span class="pun">,</span></li><li class="L7"><span class="pln">    </span><span class="typ">ProductDetailsComponent</span><span class="pun">,</span></li><li class="L8"><span class="pln">    </span><span class="typ">CartComponent</span><span class="pun">,</span></li><li class="L9"><span class="pln">    </span><span class="typ">ShippingComponent</span></li><li class="L0"><span class="pln">  </span><span class="pun">],</span></li><li class="L1"><span class="pln">  bootstrap</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></li><li class="L2"><span class="pln">    </span><span class="typ">AppComponent</span></li><li class="L3"><span class="pln">  </span><span class="pun">]</span></li><li class="L4"><span class="pun">})</span></li><li class="L5"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></li></ol></code>
    </pre></aio-code></code-example></p><p translation-result="on">新的配送组件尚未挂钩到任何其它组件，但你可以通过输入其路由特有的 URL 在预览窗格中看到它。该 URL 具有以下模式：<code>https://getting-started.stackblitz.io/shipping</code>，其中的 gets-started.stackblitz.io 部分可能与你的 StackBlitz 项目不同。</p><p translation-origin="off">The new shipping component isn't hooked into any other component yet, but you can see it in the preview pane by entering the URL specified by its route. The URL has the pattern: <code>https://getting-started.stackblitz.io/shipping</code> where the <code>getting-started.stackblitz.io</code> part may be different for your StackBlitz project.</p><ol><li><p translation-result="on">修改配送组件，让它利用购物车服务从 <code>shipping.json</code> 文件中通过 HTTP 检索配送数据。</p><p translation-origin="off">Modify the shipping component so it uses the cart service to retrieve shipping data via HTTP from the <code>shipping.json</code> file.</p></li></ol><ol><li><p translation-result="on">导入购物车服务。</p><p translation-origin="off">Import the cart service.</p></li></ol><p><code-example header="src/app/shipping/shipping.component.ts" path="getting-started/src/app/shipping/shipping.component.ts" region="imports" ng-version="8.0.0-rc.2"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { CartService } from '../cart.service';</div><header class="ng-star-inserted">src/app/shipping/shipping.component.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/shipping/shipping.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../cart.service'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">定义 <code>shippingCosts</code> 属性。</p><p translation-origin="off">Define a <code>shippingCosts</code> property.</p></li></ol><p><code-example path="getting-started/src/app/shipping/shipping.component.ts" region="props" ng-version="8.0.0-rc.2"><div style="display:none">export class ShippingComponent { shippingCosts; }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ShippingComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  shippingCosts</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">把购物车服务注入到 <code>ShippingComponent</code> 类中：</p><p translation-origin="off">Inject the cart service into the <code>ShippingComponent</code> class:</p></li></ol><p><code-example path="getting-started/src/app/shipping/shipping.component.ts" region="inject-cart-service" ng-version="8.0.0-rc.2"><div style="display:none">constructor(private cartService: CartService) { }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">利用购物车服务的 <code>getShippingPrices()</code> 方法设置 <code>shippingCosts</code> 属性。</p><p translation-origin="off">Set the <code>shippingCosts</code> property using the <code>getShippingPrices()</code> method from cart service.</p></li></ol><p><code-example path="getting-started/src/app/shipping/shipping.component.ts" region="ctor" ng-version="8.0.0-rc.2"><div style="display:none">export class ShippingComponent { shippingCosts; constructor(private cartService: CartService) { this.shippingCosts = this.cartService.getShippingPrices(); } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ShippingComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  shippingCosts</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">shippingCosts </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">cartService</span><span class="pun">.</span><span class="pln">getShippingPrices</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">利用 async 管道修改配送组件的模板，以显示配送类型和价格：</p><p translation-origin="off">Update the shipping component's template to display the shipping types and prices using async pipe:</p></li></ol><p><code-example header="src/app/shipping/shipping.component.html" path="getting-started/src/app/shipping/shipping.component.html" ng-version="8.0.0-rc.2"><div style="display:none">&lt;h3&gt;Shipping Prices&lt;/h3&gt; &lt;div class="shipping-item" *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let shipping of shippingCosts | async"&gt; &lt;span&gt;{{ shipping.type }} &lt;/span&gt; &lt;span&gt;{{ shipping.price | currency }}&lt;/span&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/shipping/shipping.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/shipping/shipping.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Shipping Prices</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"shipping-item"</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let shipping of shippingCosts | async"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ shipping.type }} </span><span class="tag">&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ shipping.price | currency }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">在购物车页面中添加一个到配送页面的链接：</p><p translation-origin="off">Add a link from the cart page to the shipping page:</p></li></ol><p><code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.2.html" ng-version="8.0.0-rc.2"><div style="display:none">&lt;h3&gt;Cart&lt;/h3&gt; &lt;p&gt; &lt;<a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> <a href="api/router/RouterLink" class="code-anchor">routerLink</a>="/shipping"&gt;Shipping Prices&lt;/<a href="api/router/RouterLinkWithHref" class="code-anchor">a</a>&gt; &lt;/p&gt; &lt;div class="cart-item" *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"&gt; &lt;span&gt;{{ item.name }} &lt;/span&gt; &lt;span&gt;{{ item.price | currency }}&lt;/span&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/cart/cart.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/cart/cart.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Cart</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="tag">&lt;p&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="tag">a</span></a><span class="pln"> </span><a href="api/router/RouterLink" class="code-anchor"><span class="atn">routerLink</span></a><span class="pun">=</span><span class="atv">"/shipping"</span><span class="tag">&gt;</span><span class="pln">Shipping Prices</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="tag">a</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/p&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cart-item"</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ item.name }} </span><span class="tag">&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ item.price | currency }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></p><ol><li><p translation-result="on">测试这个运费价格功能：</p><p translation-origin="off">Test your shipping prices feature:</p></li></ol><p translation-result="on">点击“Checkout”按钮，查看更新后的购物车。（注意，修改应用会导致预览窗格刷新，这会清空购物车。）</p><p translation-origin="off">Click on the "Checkout" button to see the updated cart. (Remember that changing the app causes the preview to refresh, which empties the cart.)</p><figure><img src="generated/images/guide/getting-started/cart-empty-with-shipping-prices.png" alt="Cart with link to shipping prices" width="301" height="208"></figure><p translation-result="on">点击此链接可以导航到运费页。</p><p translation-origin="off">Click on the link to navigate to the shipping prices.</p><figure><img src="generated/images/guide/getting-started/shipping-prices.png" alt="Display shipping prices" width="301" height="238"></figure><h2 id="next-steps" translation-result="on">下一步<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#next-steps"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="next-steps">Next steps<a title="Link to this heading" class="header-link" aria-hidden="true" href="getting-started/data#next-steps"><i class="material-icons">link</i></a></h2><p translation-result="on">恭喜！你有一个带有商品名录和购物车的在线商店应用了，而且你还可以查询并显示运费。</p><p translation-origin="off">Congratulations! You have an online store application with a product catalog and shopping cart. You also have the ability to look up and display shipping prices.</p><p translation-result="on">要继续探索 Angular，请选择下列选项之一：</p><p translation-origin="off">To continue exploring Angular, choose either of the following options:</p><ul><li><p translation-result="on"><a href="getting-started/forms" title="入门：表单">继续浏览“表单”部分</a>，通过添加购物车页面和基于表单的结帐功能来完成该应用。你还可以创建一个表单来收集用户信息，作为结账过程的一部分。</p><p translation-origin="off"><a href="getting-started/forms" title="Getting Started: Forms">Continue to the "Forms" section</a> to finish the app by adding the shopping cart page and a form-based checkout feature. You'll create a form to collect user information as part of checkout.</p></li><li><p translation-result="on"><a href="getting-started/deployment" title="入门：部署">跳到“部署”部分，</a>把你的应用部署到 Firebase 或转成本地开发。</p><p translation-origin="off"><a href="getting-started/deployment" title="Getting Started: Deployment">Skip ahead to the "Deployment" section</a> to deploy your app to Firebase or move to local development.</p></li></ul></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="8.0.0-rc.2"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li title="管理数据link" class="h1 ng-star-inserted active"><a href="getting-started/data#managing-data">管理数据</a></li><li title="服务link" class="h2 ng-star-inserted"><a href="getting-started/data#services">服务</a></li><li title="创建购物车服务link" class="h2 ng-star-inserted"><a href="getting-started/data#create-the-shopping-cart-service">创建购物车服务</a></li><li title="定义购物车服务link" class="h3 ng-star-inserted"><a href="getting-started/data#define-a-cart-service">定义购物车服务</a></li><li title="使用购物车服务link" class="h3 ng-star-inserted"><a href="getting-started/data#use-the-cart-service">使用购物车服务</a></li><li title="创建购物车页面link" class="h2 ng-star-inserted"><a href="getting-started/data#create-the-cart-page">创建购物车页面</a></li><li title="设置该组件link" class="h3 ng-star-inserted"><a href="getting-started/data#set-up-the-component">设置该组件</a></li><li title="显示购物车商品link" class="h3 ng-star-inserted"><a href="getting-started/data#display-the-cart-items">显示购物车商品</a></li><li title="检索运费价格link" class="h2 ng-star-inserted"><a href="getting-started/data#retrieve-shipping-prices">检索运费价格</a></li><li title="预定义的配送数据link" class="h3 ng-star-inserted"><a href="getting-started/data#predefined-shipping-data">预定义的配送数据</a></li><li title="为应用启用 HttpClientlink" class="h3 ng-star-inserted"><a href="getting-started/data#enable-httpclient-for-app">为应用启用 HttpClient</a></li><li title="为购物车服务启用 HttpClientlink" class="h3 ng-star-inserted"><a href="getting-started/data#enable-httpclient-for-cart-service">为购物车服务启用 HttpClient</a></li><li title="定义 get() 方法link" class="h3 ng-star-inserted"><a href="getting-started/data#define-the-get-method">定义 get() 方法</a></li><li title="定义配送页面link" class="h2 ng-star-inserted"><a href="getting-started/data#define-the-shipping-page">定义配送页面</a></li><li title="下一步link" class="h2 ng-star-inserted"><a href="getting-started/data#next-steps">下一步</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Post issues and suggestions on github.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2019. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：8.0.0-build.112+sha.b046dfd.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon class="mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.051f72b5bab8ff207bfa.js" type="module"></script><script src="polyfills-es2015.92690d828517d8f2f558.js" type="module"></script><script src="runtime-es5.eb6d438d3bfec085faff.js" nomodule=""></script><script src="polyfills-es5.c934c414fbe1cb3da3fe.js" nomodule=""></script><script src="main-es2015.af0867b743d91644702c.js" type="module"></script><script src="main-es5.19b08db05dc4d8318b40.js" nomodule=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>